<script setup lang="ts">
import { h, ref } from 'vue';

import { Page } from '@vben/common-ui';
import { MdiPlus, MdiViewArrowRightOutline } from '@vben/icons';

import {
  Button,
  Card,
  Descriptions,
  DescriptionsItem,
  Tag,
} from 'ant-design-vue';

import Create from './components/Create.vue';
import Detail from './components/Detail.vue';

const detailRef = ref<InstanceType<typeof Detail>>();
const createRef = ref<InstanceType<typeof Create>>();
</script>

<template>
  <Page description="查看和管理KOL提交的反馈内容" title="KOL反馈质检">
    <template #extra>
      <Button
        :icon="
          h(MdiPlus, { class: 'inline-block mr-1 text-lg -translate-y-[1px]' })
        "
        type="primary"
        @click="createRef?.open()"
      >
        Brief 质检
      </Button>
    </template>

    <section class="grid grid-cols-2 gap-4">
      <Card v-for="item in 10" :key="item" class="mb-3">
        <template #title>
          美妆达人小李
          <Tag> 春季护肤品推广项目 </Tag>
          <Tag color="green"> 已质检 </Tag>
        </template>

        <template #extra>
          <Button
            :icon="
              h(MdiViewArrowRightOutline, {
                class: 'inline-block mr-1 text-lg -translate-y-[2px]',
              })
            "
            type="dashed"
            @click="detailRef?.open()"
          >
            查看
          </Button>
        </template>

        <p>反馈文件：skincare_feedback_v1.pdf"绣面妆效"、传递品牌态度。</p>

        <Descriptions class="-mb-5 mt-4">
          <DescriptionsItem
            :content-style="{ color: 'hsl(var(--success))' }"
            :label-style="{ color: 'hsl(var(--success))' }"
            label="通过项"
          >
            3
          </DescriptionsItem>
          <DescriptionsItem
            :content-style="{ color: 'hsl(var(--warning))' }"
            :label-style="{ color: 'hsl(var(--warning))' }"
            label="警告项"
          >
            1
          </DescriptionsItem>
          <DescriptionsItem
            :content-style="{ color: 'hsl(var(--destructive))' }"
            :label-style="{ color: 'hsl(var(--destructive))' }"
            label="遗漏项"
          >
            1
          </DescriptionsItem>
        </Descriptions>
      </Card>
    </section>

    <Detail ref="detailRef" />
    <Create ref="createRef" />
  </Page>
</template>
